<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: right;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.form-el-radion {
  line-height: 30px;
  padding: 5px 0px;
  width: 100%;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.hex-el-tabs {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  transition: 0.3s;
  border-radius: 4px;
  overflow: hidden;
  padding: 15px;
}
</style>
<template>
  <div>
    <!--工具栏-->
    <div class="head-container">
      <crun-operation :permission="permission"/>
    </div>
    <!--表格渲染-->
    <el-table v-loading="crud.loading" ref="table" :data="crud.data" style="width: 100%;" @select="crud.selectChange"
              @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler"
              @filter-change="crud.handleFilterChange"
              :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
      <el-table-column type="selection" width="55"/>
      <el-table-column v-if="columns.visible('bizDate')" :show-overflow-tooltip="true" label="业务日期" prop="bizDate">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.bizDate }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('agentCode')" :show-overflow-tooltip="true" label="执行节点编码"
                       prop="agentCode"/>
      <el-table-column v-if="columns.visible('jobCode')" :show-overflow-tooltip="true" label="作业编码" prop="jobCode"/>
      <el-table-column v-if="columns.visible('taskCode')" :show-overflow-tooltip="true" label="任务编码" prop="taskCode"/>
      <el-table-column v-if="columns.visible('taskName')" :show-overflow-tooltip="true" label="任务名称" prop="taskName"/>
      <el-table-column v-if="columns.visible('resNum')" :show-overflow-tooltip="true" label="资源数" prop="resNum"/>
      <el-table-column v-if="columns.visible('priorityLevel')" :show-overflow-tooltip="true" label="优先级"
                       prop="priorityLevel"/>
      <el-table-column v-if="columns.visible('shellPath')" :show-overflow-tooltip="true" label="脚本目录" prop="shellPath"/>
      <el-table-column v-if="columns.visible('taskTrackList')" :show-overflow-tooltip="true" label="查看详情"
                       prop="taskTrackList">
        <template slot-scope="scope">
          <el-popover placement="top-start" width="200" trigger="hover">
            <el-timeline>
              <el-timeline-item v-for="(activity, index) in scope.row.taskTrackList" :key="index" :type="activity.type"
                                :timestamp="activity.upTs">
                <i class="el-icon-time" style="color:green;" v-if="activity.dealRes==true"></i>
                <i class="el-icon-time" style="color: red;" v-if="activity.dealRes==false"></i>
                {{ formatterType(activity.type, activity.msg) }}
              </el-timeline-item>
            </el-timeline>

            <el-button slot="reference">查看详情</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('execStTs')" width="200" :show-overflow-tooltip="true" label="开始执行时间"
                       prop="execStTs">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.execStTs }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import CRUD, {presenter, header, form, crud} from "@crud/crud";
import crunOperation from "@crud/extend/queue/app/running/CRUD.operation";

const queryList = [
  {cloumValue: "bizDate", cloumName: "业务日期"},
  {cloumValue: "jobCode", cloumName: "作业编码"},
  {cloumValue: "taskCode", cloumName: "任务编码"},
  {cloumValue: "taskName", cloumName: "任务名称"}
];

const defaultCrud = CRUD({
  title: "队列列表",
  queryList: queryList,
  queryOnPresenterCreated: false,
  url: '/api/queue/qryRunningQueue',
  optShow: {
    add: false,
    edit: false,
    del: false,
    download: false,
    batchUpdateStatus: false,
    batchUpdateBizDate: false,
    cpJob: false,
    proCompleted: false,
    proFailed: false
  }
});
const defaultForm = {};
export default {
  name: "appRunning",
  components: {crunOperation},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['cycle_job_status', 'task_status', 'task_track_type'],
  props: {},
  data() {
    return {
      permission: {
        del: ['appRunningQueue:del']
      }
    };
  },
  methods: {
    doQuery() {
      this.crud.toQuery();
    },
    taskStatusFormatter(row, column) {
      return this.dict.label.task_status[row.taskStatus];
    },
    handleClick(tab, event) {
      //alert(tab.name);
    }
    , formatterType(type, msg) {
      return this.dict.label.task_track_type[type] + ": \n" + msg;
    }
  }
};
</script>
